<template>
  <div class="back-wrapper" @click="goBack">
    <svg class="back-icon" viewBox="0 0 1024 1024">
      <path d="M671.968 912c-12.288 0-24.576-4.672-33.952-14.048L286.048 545.984c-18.752-18.72-18.752-49.12 0-67.872l351.968-351.968c18.752-18.752 49.12-18.752 67.872 0 18.752 18.72 18.752 49.12 0 67.872l-318.016 318.048 318.016 318.016c18.752 18.752 18.752 49.12 0 67.872C696.544 907.328 684.256 912 671.968 912z" fill="currentColor"></path>
    </svg>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'

const router = useRouter()
const goBack = () => router.back()
</script>

<style scoped>
.back-wrapper {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.1);
}

.back-icon {
  width: 20px;
  height: 20px;
}

/* 在红色背景的页面上使用白色图标 */
:global(.page-header[style*="background: #f23030"]) .back-icon {
  color: #fff;
}

/* 在白色背景的页面上使用黑色图标 */
:global(.page-header:not([style*="background: #f23030"])) .back-icon {
  color: #333;
}

.back-wrapper:active {
  background: rgba(0, 0, 0, 0.2);
}
</style> 